<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>9种图表展示</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<style>
body { margin: 0; }
.el-header, .el-footer {
background: #409EFF;
color: white;
line-height: 60px;
padding: 0 20px !important;
}
.chart-container {
width: 100%;
height: 100%;
border: 1px solid #ebeef5;
border-radius: 4px;
padding: 10px;
}
</style>
</head>
<body>
<div id="app">
<el-container style="height: 100vh; flex-direction: column">
<!-- 头部 -->
<el-header style="height: 60px;">
<el-row style="width: 100%">
<el-col :span="12">图表展示系统</el-col>
<el-col :span="12" style="text-align: right">
<el-dropdown>
<span class="el-dropdown-link" style="color: white; cursor: pointer">
图表类型列表<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item v-for="(type, index) in chartTypes" :key="index">
{{ type }}
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-col>
</el-row>
</el-header>

<!-- 中间内容 -->
<el-main style="flex: 1; padding: 0;">
<el-row :gutter="20" style="height: 100%; margin: 0; padding: 20px">
<el-col
v-for="(item, index) in 9"
:key="index"
:span="8"
style="height: 33.33%; margin-bottom: 20px"
>
<div
:ref="'chart' + index"
class="chart-container"
></div>
</el-col>
</el-row>
</el-main>

<el-footer style="height: 60px;">
共展示 {{ chartTypes.length }} 种图表类型  2023
</el-footer>
</el-container>
</div>

<script>
new Vue({
el: '#app',
data() {
return {
chartTypes: [
'折线图',
'散点图',
'箱线图',
'热力图',
'饼图',
'柱形图',
'雷达图',
'树图',
'漏斗图'
]
}
},
mounted() {
this.initCharts();
window.addEventListener('resize', this.resizeCharts);
},
methods: {
initCharts() {
this.$nextTick(() => {
this.charts = [];
const chartConfigs = this.getChartConfigs();

for(let i = 0; i < 9; i++) {
const chartDom = this.$refs['chart' + i][0];
const chart = echarts.init(chartDom);
chart.setOption(chartConfigs[i]);
this.charts.push(chart);
}
});
},
getChartConfigs() {
return [
// 0: 折线图
{
title: { text: '折线图' },
xAxis: { data: ['周一', '周二', '周三', '周四'] },
yAxis: {},
series: [{
type: 'line',
data: [25, 36, 28, 45],
smooth: true,
areaStyle: {}
}]
},
// 1: 散点图
{
title: { text: '散点图' },
xAxis: { scale: true },
yAxis: { scale: true },
series: [{
type: 'scatter',
data: [
[10, 5], [15, 8], [8, 12],
[12, 6], [18, 9], [5, 11]
],
symbolSize: 15
}]
},
// 2: 箱线图
{
title: { text: '箱线图' },
dataset: [{
source: [
[850, 740, 900, 1070, 930, 850],
[960, 940, 960, 1020, 980, 990],
[880, 800, 810, 790, 810, 870]
]
}, {
transform: { type: 'boxplot' }
}],
xAxis: { type: 'category' },
yAxis: { type: 'value' },
series: [{
type: 'boxplot',
datasetIndex: 1
}]
},
// 3: 热力图
{
title: { text: '热力图' },
xAxis: { type: 'category', data: ['A', 'B', 'C'] },
yAxis: { type: 'category', data: ['X', 'Y', 'Z'] },
visualMap: { min: 0, max: 10 },
series: [{
type: 'heatmap',
data: [
[0, 0, 5], [0, 1, 7], [0, 2, 3],
[1, 0, 2], [1, 1, 4], [1, 2, 8],
[2, 0, 6], [2, 1, 9], [2, 2, 1]
]
}]
},
// 4: 饼图
{
title: { text: '饼图' },
tooltip: { trigger: 'item' },
series: [{
type: 'pie',
radius: '55%',
data: [
{ value: 335, name: 'A类' },
{ value: 310, name: 'B类' },
{ value: 274, name: 'C类' }
]
}]
},
// 5: 柱形图
{
title: { text: '柱形图' },
xAxis: { data: ['产品A', '产品B', '产品C'] },
yAxis: {},
series: [{
type: 'bar',
data: [120, 200, 150],
itemStyle: { color: '#409EFF' }
}]
},
// 6: 雷达图
{
title: { text: '雷达图' },
radar: {
indicator: [
{ name: '销售', max: 100 },
{ name: '技术', max: 100 },
{ name: '市场', max: 100 }
]
},
series: [{
type: 'radar',
data: [{
value: [80, 60, 90],
name: '能力评估'
}]
}]
},
// 7: 树图
{
title: { text: '树图' },
series: [{
type: 'tree',
data: [{
name: '根节点',
children: [
{
name: '节点A',
children: [
{ name: '叶子A1' },
{ name: '叶子A2' }
]
},
{
name: '节点B',
children: [
{ name: '叶子B1' },
{ name: '叶子B2' }
]
}
]
}],
orient: 'vertical',
symbolSize: 10
}]
},
// 8: 漏斗图
{
title: { text: '漏斗图' },
tooltip: { trigger: 'item' },
series: [{
type: 'funnel',
data: [
{ value: 100, name: '访问量' },
{ value: 80, name: '点击量' },
{ value: 60, name: '注册量' },
{ value: 30, name: '订单量' }
]
}]
}
];
},
resizeCharts() {
this.charts.forEach(chart => chart.resize());
}
}
})
</script>
</body>
</html>